<template>
    <div class="card-container">
        <van-list :offset="0" v-model="loading" :finished="finished" :immediate-check="check" @load="onLoad"> 
            <!-- list -->
            <div class="card-box" v-for="(item,index) in listData" :key="index">
                <!-- 上 -->
                <div class="card-top" v-if="lang=='zh' ">
                    订单编号：{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                <div class="card-top" v-else>
                   Order number：{{item.order_code}}
                    <p >{{item.buyer_state_txt}}</p>
                </div>
                <!-- 中(有可能是多个) -->
                <div class="card-middle" v-for="(list,idx) in item.goodsList" :key="idx" @click="goDetails(item)">
                    <div class="img-box">
                       <img :src="list.head_img">
                    </div>
                    <dl>
                        <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{list.title}}</dt>
                        <dd>￥{{list.goods_price}} <span>x{{list.goods_num}}</span></dd>
                    </dl>
                </div>
                <div class="card-bottom" >
                    {{item.create_time}}
                    <div v-if="lang=='zh' " class="handle-box" @click="goDetails(item)">
                        <p v-if="(item.buyer_state==0 || item.buyer_state==1 ) && item.seller_state != 11
                           &&item.seller_state !=1 && item.seller_state !=2 && item.seller_state !=3 && item.seller_state !=4 &&  item.seller_state !=10
                        ">
                            拒绝置换
                        </p>
                         <p v-if=" item.seller_state==0 && item.buyer_state!=8">
                            同意置换
                        </p>
                        <p v-if="(item.seller_state==1 || item.seller_state==2 || item.seller_state==3) && (item.buyer_state!=8)
                            &&(item.buyer_state!=9) && (item.seller_state!=1) && (item.buyer_state!=7)
                        ">
                            申请关闭交易
                        </p> 
                        <!-- <p v-if="(item.seller_state==3)&& (item.buyer_state!=7) && (item.buyer_state!=8)&&(item.buyer_state!=9)
                            &&(item.buyer_state!=2)&&(item.seller_state!=4)"
                        >
                            申请关闭交易
                        </p>  -->

                        <p v-if="((item.buyer_state==1 ) || (item.buyer_state == 0) || (item.buyer_state == 2)|| (item.buyer_state == 3))&& (item.seller_state == 2)">
                            支付保证金
                        </p>  
                        <!-- /****订单所涉及的所有状态
                        * 
                        * 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
                        * 6保证金已退回、7保证金没收、8申请撤销、9已关闭
                        * 
                        * 卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
                        * 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
                        * 
                        * ****/  -->
                         <!-- 买方未发货且没有申请关闭交易 && 卖家愿意继续交易且未发货-->
                        <!-- <p v-if="(item.buyer_state < 2) && (item.seller_state>2 )&& (item.seller_state <6 && item.seller_state !=4)">我要发货</p>                         -->
                        <p v-if="(item.buyer_state==1 && item.seller_state ==3) || (item.buyer_state==2 && item.seller_state !=4 && item.seller_state !=10)">我要发货</p>                        
                        <p v-if="(item.seller_state==6 && item.seller_state != 7 ) ">确认收货</p>     

                        <p class="look" v-if="item.seller_state==1 ||item.buyer_state==3 || item.buyer_state==6 ||  item.buyer_state==7 || item.buyer_state==8 ||
                          item.buyer_state == 9 ||  item.seller_state==11 || item.seller_state==4 ||item.seller_state ==10 || (item.seller_state ==3 &&item.buyer_state>2) ||
                            item.seller_state == 7 || (item.buyer_state==6 && item.seller_state == 8)">
                            查看交易
                        </p>                        
                    </div>
                    <div v-else  class="handle-box" @click="goDetails(item)">
                        <!-- <p v-if="(item.buyer_state==0 || item.buyer_state==1 || item.seller_state==1) && item.seller_state != 11
                            && item.seller_state != 3 &&(item.seller_state!=1)
                        "> -->
                       <p v-if="(item.buyer_state==0 || item.buyer_state==1 ) && item.seller_state != 11
                           &&item.seller_state !=1 && item.seller_state !=2 && item.seller_state !=3 && item.seller_state !=4 &&  item.seller_state !=10
                        ">
                            Refuse
                        </p>
                         <p v-if=" item.seller_state==0 && item.buyer_state!=8">
                            Agree 
                        </p>
                         <p v-if="(item.seller_state==1 || item.seller_state==2 || item.seller_state==3) && (item.buyer_state!=8)
                            &&(item.buyer_state!=9) && (item.seller_state!=1) && (item.buyer_state!=7)
                        ">
                           Apply for closure
                        </p> 
                        <!-- <p v-if="(item.buyer_state==0 || item.buyer_state==1 ) && (item.seller_state != 11) && (item.seller_state != 0)
                            && (item.seller_state != 3)&&(item.seller_state!=1)
                        "> -->
                        <p v-if="((item.buyer_state==1 ) || (item.buyer_state == 0) || (item.buyer_state == 2)|| (item.buyer_state == 3))&& (item.seller_state == 2)">
                            Payment deposit
                        </p>  

                        <!-- 买方未发货且没有申请关闭交易 && 卖家愿意继续交易且未发货-->                            
                        <p v-if="(item.buyer_state==1 && item.seller_state ==3) || (item.buyer_state==2 && item.seller_state !=4 && item.seller_state !=10)">
                            Send out
                        </p>                        
                        <p v-if="item.seller_state==6 && item.seller_state != 7">Confirm receipt</p>                        
                        <p class="look" v-if="item.seller_state==1 ||item.buyer_state==3 || item.buyer_state==7 || item.buyer_state==8 ||
                          item.buyer_state == 9 ||  item.seller_state==11 || item.seller_state==4 ||item.seller_state ==10 || (item.seller_state ==3 &&item.buyer_state>2) ||
                            item.seller_state == 7 || (item.buyer_state==6 && item.seller_state == 8)">
                            View
                        </p>                        
                    </div>
                </div>
               <div class="card-order" >
                  <i  v-if="lang=='zh' ">保证金：￥{{item.seller_bond}}</i> 
                  <i  v-else>earnest money：￥{{item.seller_bond}}</i> 
                   <!-- 未支付 -->
                   <span class="red" v-if="item.seller_state ==1 || item.seller_state==11 || item.seller_state==0 || 
                   item.seller_state ==2 || (item.seller_state ==10)
                   ">
                       {{item.seller_state_txt}}
                    </span>
                    <!-- 已支付 -->
                     <span v-if="(item.seller_state==3 && item.buyer_state!=8) || item.seller_state==4 || item.seller_state==6 ">
                       {{item.seller_state_txt}}
                    </span>
                    <!-- 已退回 -->
                    <span v-if="item.seller_state ==8" >
                       {{item.seller_state_txt}}
                    </span>
                    <!-- 退回中 -->
                    <span v-if="(item.seller_state == 5 && item.buyer_state != 4 )" >
                       {{item.seller_state_txt}}
                    </span>
                      <!-- 已没收 -->
                     <span v-if="item.seller_state ==7 && item.buyer_state!=5">
                       {{item.seller_state_txt}}
                    </span>
                     <!-- 冻结中 -->
                     <span class="yellow" v-if="item.buyer_state==5 && item.seller_state==7">
                       {{item.seller_state_txt}}
                    </span>
                     <!-- 冻结中 -->
                     <span class="yellow" v-if="item.buyer_state==8 && item.seller_state==3">
                       {{item.seller_state_txt}}
                    </span>
                </div>
            </div>
        </van-list>
        <div v-if="lang=='zh' ">
            <div class="nolist" v-if="finished && dataLength !=0">没有更多数据</div>
            <div class="nolist" v-if="dataLength==0">您还没有相关的订单</div>
        </div>
      
        <!-- loading -->
        <div class="loading-box" v-show="load">
            <van-loading type="spinner" color="white" />
        </div>
      </div>
</template>

<script>
import {getOrdersList,getOrdersDetails,postCloseOrder,postSureOrder,postSendExpress,postFinishExpress,} from '@/api/order/exchange'
import { Tab, Tabs, List, Toast,Dialog , Loading,} from "vant";
export default {
  name: "exchange",
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Dialog .name]: Dialog ,
    [Loading.name]: Loading,
  },
  //声明组件
  data() {
    return {
      lang:'zh',//当前网页语言类型 zh 中文  en 英语 
      userId: 0, //用户id
      type: 2, //类型：1已支付、2待支付、3已完成、4已取消
      pageIndex: 1, //默认显示第一页
      pageSize: 10, //一页显示5条数据
      loading: false, //加载状态
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      check: false, //显示加载中提示文案
      listData: [],//取到的列表数据 用来传到子组件
      dataLength:0,//数据listData长度
      load: false, //加载提示框 是否显示

       /****订单所涉及的所有状态
       * 
       * 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
       * 6保证金已退回、7保证金没收、8申请撤销、9已关闭
       * 
       * 卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
       * 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
       * 
       * ****/    
    };
  },
  created() {
     //获取用户id
    if(this.$route.query.userId && this.$route.query.userId > 0){
        this.userId = this.$route.query.userId;
        //把用户id存储在缓存
        window.localStorage.setItem("userId",this.userId);
    }else{
        this.userId = window.localStorage.getItem("userId");
    }
    //获得语言类型lang
    if(this.$route.query.lang) {
        this.lang = this.$route.query.lang;
    }
    this.getList();//获取数据
  },
  methods: {
   //获得列表数据
      getList(){
        getOrdersList(this.userId,this.pageIndex,this.pageSize,this.lang).then(res => {
            console.log(res);
            // debugger;
            if (res.code == 200) {
              let newAry = [];
              let data = res.data.list;
              this.new = res.data.new;//数量
              this.$emit('upDate', this.new);//触发父组件upDate事件 改过新数据数
              data.forEach(element => {
                  let obj = {};
                  obj.create_time = element.submit_time;
                  obj.title = element.title;
                  obj.order_code = element.exchange_code;
                  obj.seller_bond = element.seller_bond;
                  obj.id = element.id;
                  obj.goodsList = element.goodsList;
                  obj.buyer_state = element.buyer_state;
                  obj.seller_state = element.seller_state;

                /****订单所涉及的所有状态
                 * 
                 * 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
                 * 6保证金已退回、7保证金没收、8申请撤销、9已关闭
                 * 
                 * 卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
                 * 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
                 * 
                 * ****/      
                  //买卖双方返回订单状态  生成买方状态描述  具体参考上面注释
                  if(element.buyer_state == 0 && element.seller_state ==0){
                      if(this.lang == 'zh'){
                        obj.buyer_state_txt = "对方发起置换意向";
                      }else{
                        obj.buyer_state_txt = "Pending";  
                      }
                     
                  }
                  if(element.buyer_state == 0 && element.seller_state !=0){
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "等待对方支付保证金";
                        }else{
                             obj.buyer_state_txt = "waiting for payment";
                        }
                  }
                  if(element.buyer_state == 0 &&  (element.seller_state == 11|| element.seller_state == 1)){//没有支付保证金前 拒绝置换
                      if(this.lang == 'zh'){
                         obj.buyer_state_txt = "交易已关闭";
                      }else{
                        obj.buyer_state_txt = "Transaction closed";
                      }
                  }
                  if(element.buyer_state == 1){
                       if(this.lang == 'zh'){
                           if(element.seller_state == 10){
                                obj.buyer_state_txt = "申请关闭中";
                           }else{    
                                obj.buyer_state_txt = "对方已支付保证金";
                           } 
                       }else{
                           if(element.seller_state == 10){
                                obj.buyer_state_txt = "Application closed";
                           }else{    
                                obj.buyer_state_txt = "Margin paid";
                           } 
        
                       }
                  }
                   if(element.buyer_state == 1 && element.seller_state ==3){
                       if(this.lang == 'zh'){
                          obj.buyer_state_txt = "双方已支付保证金";
                       }else{
                          obj.buyer_state_txt = "Margin paid";
                       }
                  }
                  if(element.buyer_state == 2){//根据买卖双方状态判断 ，卖家已发货 买家没支付藏品金额之前
                      if(this.lang == 'zh'){
                        if(element.seller_state == 4) {
                            obj.buyer_state_txt = "双方已发货";
                        }else{
                            obj.buyer_state_txt = "对方已发货";
                        }
                        if(element.seller_state == 10) {
                            obj.buyer_state_txt = "申请关闭中";
                        }
                      }else{
                        if(element.seller_state == 4) {
                            obj.buyer_state_txt = "all has shipped";
                        }else{
                            obj.buyer_state_txt = "Initiator has shipped";
                        }
                        if(element.seller_state == 10) {
                            obj.buyer_state_txt = "Application closed";
                        }
                       
                      }
                  }
                  if(element.buyer_state == 3){
                    if(this.lang == 'zh'){
                      obj.buyer_state_txt = "平台已验收";
                    }else{
                      obj.buyer_state_txt = "has been accepted";
                    }
                  }
                  if(element.buyer_state == 4){
                       if(this.lang == 'zh'){
                            obj.buyer_state_txt = "平台已发货";
                       }else{
                           obj.buyer_state_txt = "platform has shipped";
                       }
                  }
                  if(element.buyer_state == 5){ //已收对方藏品
                      if(this.lang == 'zh'){   
                          if(element.seller_state == 7){//两个都收到了 交易完成
                            obj.buyer_state_txt = "交易完成";  
                          }else{
                            obj.buyer_state_txt = "对方已收货";  
                          }
                        
                      }else{
                        if(element.seller_state == 7){//两个都收到了 交易完成
                            obj.buyer_state_txt = "Transaction complete";  
                        }else{
                            obj.buyer_state_txt = "received";  
                        }
                           
                      } 
                  }       
                 if(element.buyer_state == 6){
                      if(this.lang == 'zh'){
                          if(element.seller_state == 8){//两都退回了
                            obj.buyer_state_txt = "交易完成";
                          }else{
                            obj.buyer_state_txt = "保证金已退回";
                          }
                         
                      }else{
                          if(element.seller_state == 8){//两都退回了
                            obj.buyer_state_txt = "Transaction complete";
                          }else{
                            obj.buyer_state_txt = "Margin returned";
                          }
                         
                      }
                  }
                  if(element.buyer_state == 7){
                      if(this.lang == 'zh'){
                         obj.buyer_state_txt = "保证金已没收";
                      }else{
                          obj.buyer_state_txt = "Margin onfiscated";
                      }
                  }
                  if(element.buyer_state == 8){
                      if(this.lang == 'zh'){   
                         obj.buyer_state_txt = "申请关闭中";
                      }else{
                        obj.buyer_state_txt = "Application closed";
                      }
                  }  
                  if(element.buyer_state == 9 || element.seller_state == 11 || element.seller_state==1){
                      if(this.lang == 'zh'){   
                         obj.buyer_state_txt = "交易已关闭";
                      }else{
                        obj.buyer_state_txt = "Application closed";
                      }
                  }  
                //   debugger;
                  //买卖双方返回订单状态  保证金状态  具体参考上面注释
                 if(element.seller_state == 1 || element.seller_state == 11 || element.seller_state ==0 || 
                    element.seller_state ==2){
                        if(this.lang == 'zh'){
                            // obj.seller_state_txt = "未支付";
                            obj.seller_state_txt = "";
                        }else{
                            // obj.seller_state_txt = "unpaid";
                            obj.seller_state_txt = "";
                        }
                  }else
                  if(element.seller_state == 9 ){
                       if(this.lang == 'zh'){
                        obj.seller_state_txt = "已没收";
                       }else{
                        obj.seller_state_txt = "Confiscated";
                       }
                  }else
                  if(element.seller_state == 8){
                      if(this.lang == 'zh'){
                        obj.seller_state_txt = "已退回";
                      }else{
                          obj.seller_state_txt = "Returned";
                      }  
                  }else    
                  if((element.seller_state == 7 &&  element.buyer_state == 5)|| (element.seller_state == 7&& element.buyer_state == 6) || (element.seller_state == 3 &&  element.buyer_state == 8)){//交易完成 保证金没到账
                      if(element.seller_state != 8){
                           if(this.lang == 'zh'){
                            obj.seller_state_txt = "冻结中"; 
                           }else{
                            obj.seller_state_txt = "Freezing";  
                           }
                      }
                  }else
                  if(element.seller_state == 10){
                      if(this.lang == 'zh'){
                          if(element.buyer_state ==2){//对方发货了
                             obj.seller_state_txt = "已没收";
                          }else{
                            obj.seller_state_txt = "未支付";
                          }
                       
                      }else{
                        if(element.buyer_state ==2){//对方发货了
                             obj.seller_state_txt = "Confiscated";
                          }else{
                            obj.seller_state_txt = "unpaid";
                          }
                      }  
                  }
                  else{
                      if(this.lang == 'zh'){ 
                        obj.seller_state_txt = "已支付";
                      }else{
                           obj.seller_state_txt = "Paid"; 
                      }
                  }
                  newAry.push(obj);
              });
              //判断有没有数据了
              if(newAry.length>0){//有数据
                  this.listData = this.listData.concat(newAry);
                  this.loading = false;
              }else{//没有数据
                  this.finished = true;
                  this.loading = false;
              }
            //   console.log(this.listData); 
              this.dataLength = this.listData.length; 
              this.load = false;
            } else {
               Toast(res.msg);
            }
        });
      }, 
    onLoad() {
      let _this = this;
        //  console.log("触发");
        _this.pageIndex++;//每触发一次 +1
            setTimeout(() => {
                _this.getList();
        }, 500);
    },
    //跳转到详情页
    goDetails(item){
        let _id = item.id;
        let buy_state = item.buyer_state;//买家状态
        let seller_state = item.seller_state;//卖家状态
        let para = {};
	    if(this.lang == 'zh'){
            para.title = "订单详情";
        }else{
            para.title = "order details";
        }
        // para.id = _id;//要跳转对象的id
        // para.userId=this.userId;
		// para.lang = this.lang//显示网页语言类型 zh中文 en英文
        //根据不同状态跳转到不同的详情页面
        if(seller_state == 0 ||seller_state == 2 ){//卖家没有支付保证金 
            if(buy_state==8){
                para.url = "/exchangeLook?type=5&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(buy_state ==9 ||seller_state==11){//如果是交易关闭或 拒绝售卖
                //跳转到详情
                 para.url = "/exchangeLook?type=6&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else if( (buy_state == 0 || buy_state == 1 ) && (seller_state == 0)){//如果对方也没有支付
                //跳转到操作处理页面
                   para.url = "/handle?lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else if(buy_state == 0 && seller_state == 2){//如果对方没有支付  被置换方 卖方已同意置换但未支付保证金   应该是查看订单
                //跳转到详情
                   para.url = "/exchangeLook?type=9&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else if(buy_state == 7) {
                //跳转到详情
                para.url = "/exchangeLook?type=6&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
            else{
                //跳转到支付保证金页面
                para.url = "/epay?lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
        }else if(seller_state ==1){//拒绝置换的
            para.url = "/exchangeLook?type=6&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
        }
        else if(seller_state ==3 && buy_state==2){//双方都已支付保证金 且对方已发货
            para.url = "/exchangeSend?lang="+this.lang+"&id="+_id+"&userId="+this.userId;
        }else if(seller_state ==4 && buy_state==1){//对方已支付保证金但未发货  被置换方已发货
            para.url = "/exchangeLook?type=8&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
        }else if(seller_state ==3 && buy_state==0){//被置换方卖家已支付保证金   对方买家未支付保证金   查看订单
            para.url = "/exchangeLook?type=9&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
        }
        else{//其他情况 全部是查看订单详情
        // debugger;
            //继续做判断
            if(buy_state == 1 && seller_state==3){//双方都已支付保证金   跳转到我要发货页面
                para.url = "/exchangeSend?type=10&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(buy_state == 2 && seller_state==4){//双方已发货
                //跳转到待物流的详情
                 para.url = "/exchangeLook?type=2&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(buy_state==3){//平台已收货
                //跳转到买方已支付藏品金额
                para.url = "/exchangeLook?type=3&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(seller_state ==6){//平台已发货或对方收货了
                //跳转到买方已支付藏品金额
                 para.url = "/exchangeLook?type=7&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if((seller_state==7 && buy_state ==5)|| (seller_state == 7&& buy_state == 6) || (seller_state == 7&& buy_state == 4)){//双方都已收货 交易完成
                //带删除
                para.url = "/exchangeLook?type=4&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else if(buy_state==8 || seller_state ==10){//申请关闭中
               para.url = "/exchangeLook?type=5&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(buy_state==9 || seller_state ==11 || buy_state==7 ){//已关闭
                 para.url = "/exchangeLook?type=6&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }else
            if(buy_state==6 && seller_state ==8 ){//都已经确退回了保证金
                 para.url = "/exchangeLook?type=4&lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
            else{//一般情况
                 para.url = "/exchangeLook?lang="+this.lang+"&id="+_id+"&userId="+this.userId;
            }
        }
        console.log(para);
        this.interaction.hLink(para);
    },
  }
};
</script>
<style lang="stylus" scoped>
*{
    box-sizing:border-box;
}
.card-box{
    background: #fff;
    margin-bottom :.186667rem;
    padding-bottom :0;
    border-bottom: 1px solid #f1f1f1;
    // 上
    .card-top{
        height :1.013333rem;
        line-height :1.013333rem;
        font-size:.32rem;
        padding:0 .213333rem;
        color:#a2a2a2;
        p{
            color:#cb9c57;
            float:right;
        }
        .floatl{
            float:left;
        }
    }
    // 中
    .card-middle{
        overflow:hidden;
        background:#f5f5f5;
        padding:.266667rem;
        margin-bottom :.133333rem;
        width:100%;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                margin :0;
                height 100%;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                // height: 1.52rem;
                
            }
             dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    .card-middle:last-child{
        margin:0;
    }
    // 下
    .card-bottom{
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        box-sizing :border-box;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        position:relative;
        color:#cb9c57;
        .handle-box{
            position:absolute;
            right:.266667rem;
            top:0;
            height: 1.013333rem;

            p{
                float:left;
                margin-left :.533333rem;
                font-size:.346667rem;
            }
            p:last-child{
                background:#cb9c57;
                border-radius:100px;
                width:2.213333rem;
                height:.693333rem;
                line-height:.693333rem;
                text-align :center;
                line-height :.693333rem;
                font-family:PingFangSC-Medium;
                color:#ffffff;
                margin-top :.16rem;
            }
            p.look{
                color:#cb9c57;
                background:#ffffff;
                border:1px solid #cb9c57;
                border-radius:100px;
                width:2.16rem;
                font-family:PingFangSC-Regular;
                font-size:.346667rem;
                color:#cb9c57;
                text-align:center;
                height:.64rem;
                line-height :.64rem;
            }

        }
    }
    // 下
    .card-order{
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        font-family:PingFangSC-Medium;
        font-size:.346667rem;
        span{
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            float:right;
            color:#58a701;
            &.yellow{
                 color:#cb9c57;
            }
            &.red{
              color:#d84053;
            }
            &.yue{
              color:#d84053;
            }
        }
    }
}
.nolist{
	font-size: 0.32rem;
	color: #A2A2A2;
	text-align: center;
	padding: 0.533333rem 0;
}

.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>

